<template>
	<view class="version">
		<div class='version_info'>
			<image class="version_logo" src="../../static/image/logo.png" mode=""></image>
			<div class='oldVersion' v-if='oldVersion == newVersion'>
				<span>当前已是最新版本: {{newVersion}} </span>
			</div>
			<div class='new_version' v-else>
				<!-- <span>当前版本{{oldVersion}}</span> -->
				<span>发现新版本{{newVersion}}</span><br>
				<span>(当前{{oldVersion}})</span>
				<span @click='downloadurls(downloadurl)'>点击立即升级</span>
			</div> 
			<div class='curr_progress' v-show=' currProgress > 1 && currProgress <= 100'>
				<span>{{currProgress}}%</span>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 版本号
				oldVersion: '1.3.1',
				// 最新版本号
				newVersion: '',
				// 下载地址
				downloadurl: '',
				// 下载进度
				currProgress: 0,
				isShowProgress: false
			};
		},
		methods: {
			getSiting() {
				this.$http({
					url: '/wxapi/UserApi/getSiting',
					methods: 'POST'
				}).then(res => {
					if (res.code == 200) {
						this.newVersion = res.data.app_version 
						this.downloadurl = res.data.app_downloadurl
					}
				})
			},
			downloadurls(downloadurl) {
				
				let that = this
				const downloadTask = uni.downloadFile({
					url: downloadurl,
					success: (res) => {
						if (res.statusCode === 200) {}
						let that = this;
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: function(red) {
								uni.openDocument({
									filePath: red.savedFilePath,
									success: (res) => {
										console.log('成功')
									}
								})
							}
						});
					}
				});
				downloadTask.onProgressUpdate((res) => {
					this.currProgress = res.progress
				});
			}
		}, 
		mounted() {
			this.getSiting()
		}
	}
</script>

<style lang="less">
	.version {
		.version_info {
			margin: 200rpx auto 0 auto;
			width: 460rpx;
			height: 300rpx;
			line-height: 100rpx;
			font-size: 36rpx;
			text-align: center;

			.version_logo {
				width: 100%;
				height: 100rpx;
			}

			.new_version {
				& :nth-child(3) {
					position: relative;
					top: -20px; 
					color: #999;
					font-size: 18px;
				}
				& :nth-child(4) {
					display: block;
					height: 80rpx;
					line-height: 80rpx;
					border: 1px solid #333;
					border-radius: 10rpx;
				}
			} 
		}
	}
</style>
